<template>
  <div id="seat">
    <div id="container" style="width: 100%" v-if="show"></div>
    <div class="wushuju" v-else></div>
  </div>
</template>
<script>
import { getBlock } from "../api/index";
import * as Highcharts from "highcharts";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(Highcharts);
import { getURLParams } from "../script/util";
function compare(v) {
  return function (a, b) {
    var val1 = a[v];
    var val2 = b[v];
    return val2 - val1;
  };
}

// var href = window.location.href;
// let { blockId, tradeDate, blockName } = getURLParams(href);
// blockName = decodeURI(blockName);

// console.log(blockId, tradeDate, blockName);

export default {
  data() {
    return {
      data: [],
      show: true,
      blockName: "",
    };
  },
  mounted() {
    window.remoteFunc = (blockId, tradeDate, blockName) => {
      this.blockName = decodeURI(blockName);
      this.getBlock(blockId, tradeDate);
    };
    this.getBlock("800880275", "银行");

    // remoteFunc("800880275", "20201103", "%E9%93%B6%E8%A1%8C");
  },
  methods: {
    async getBlock(blockId, tradeDate) {
      const data = await getBlock({ blockId: blockId, tradeDate: tradeDate });
      console.log(data, "data====");
      let back = data.data;
      if (back.shapeGroupYear == "") {
        this.show = false;
        console.log("null");
      } else {
        back.shapeGroupYear.sort(compare("patternCount"));
        this.data = back.shapeGroupYear.map((item) => {
          item.name = item.patternName;
          item.y = item.patternCount;
          item.d = String(item.firstShapeDate).replace(
            /^(\d{4})(\d{2})(\d{2})$/,
            "$1-$2-$3"
          );
          return item;
        });

        this.drow("container", this.data);
        this.show = true;
      }
    },

    drow(el, data) {
      Highcharts.chart(el, {
        chart: { type: "column" },
        legend: { enabled: false },
        credits: { enabled: false },
        title: { text: this.blockName },
        subtitle: { text: "近一年形态信号统计" },
        xAxis: {
          type: "category",
        },
        yAxis: {
          minTickInterval: 1,
          startOnTick: false,
          endOnTick: false,
          gridLineColor: null,
          title: {
            text: "",
          },

          maxPadding: 0.2,
        },
        plotOptions: {
          column: { colorByPoint: true },
        },
        tooltip: {
          formatter: function () {
            return (
              "<b>" +
              this.point.y +
              "次 首次出现：" +
              this.point.d +
              "</b><br/>"
            );
          },
        },
        series: [
          {
            data: data,
          },
        ],
      });
    },
  },
};

// 主题颜色
Highcharts.theme = {
  chart: {
    plotBorderWidth: 1,
    backgroundColor: "#090910",
    borderColor: "#090910",
    plotBorderColor: "#27282E",
    // height: "412px",
    borderWidth: 1,
  },
  colors: [
    // "#502EC8",
    "rgba(80,46,200,0.7)",
    "rgba(230, 75, 34, 0.7)",
    "rgba(252, 164, 35, 0.7)",
    "rgba(235, 132, 105, 0.7)",
    "rgba(41, 115, 136, 0.7)",
    "rgba(36, 76, 138, 0.7)",
    "rgba(20, 130, 161, 0.7)",
    "rgba(18, 202, 196, 0.7)",
    "rgba(255, 203, 46, 0.7)",
  ],
  title: {
    style: {
      fontSize: "18px",
      color: "#FF8A1C",
      fontWeight: "400",
    },
  },
  subtitle: {
    style: {
      fontSize: "16px",
      color: "#ccc",
      fontWeight: "400",
    },
  },
  xAxis: {
    lineWidth: 0,
    labels: {
      rotation: 0,
      align: "right",
      y: -6,
      style: {
        fontSize: "14px",
        color: "#fff",
        fontFamily: "Verdana, sans-serif",
        writingMode: "tb-rl",
      },
    },
  },
  yAxis: {
    gridLineColor: "#1E2127",
    title: {
      style: {
        fontWeight: "400",
        fontSize: "14px",
        color: "#999",
        textOutline: "none",
      },
    },
  },
  plotOptions: {
    series: {
      color: "#D4302C",

      borderWidth: 0,
      negativeColor: "#4cbb5b",
      dataLabels: {
        enabled: false,
        y: -2,
        style: {
          fontWeight: "400",
          fontSize: "13px",
          color: "#ffffff",
          textOutline: "none",
        },
      },
    },
  },
  tooltip: {
    backgroundColor: "#1D202C",
    borderColor: "#414663",
    style: {
      color: "#F0F0F0",
    },
  },
};

Highcharts.setOptions(Highcharts.theme);
</script>

<style lang="scss" scoped>
#seat {
  background: #090910;
}
.wushuju {
  width: 301px;
  height: 176px;
  background: url("../images/wushuju.png") no-repeat;
  margin: 100px auto;
}
</style>
